<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<%@ page pageEncoding="UTF-8"%>
<html>
<head>
	<link rel="stylesheet" href="css/cupertino/jquery-ui-1.10.3.custom.min.css" />
	<link rel="stylesheet" href="css/ui.jqgrid.css" />
	<link rel="stylesheet" href="js/plugins/ui.multiselect.css" />
	<link rel="stylesheet" href="js/plugins/searchFilter.css" />
	
	
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
	<script type="text/javascript" src="js/grid.locale-cn.js"></script>
	<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="js/plugins/grid.addons.js"></script>
    <script type="text/javascript" src="js/plugins/grid.postext.js"></script>
    <script type="text/javascript" src="js/plugins/grid.setcolumns.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.contextmenu.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.searchFilter.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.tablednd.js"></script>
    <script type="text/javascript" src="js/plugins/ui.multiselect.js"></script>
    <script>
    $(function() {
    jQuery("#editgrid").jqGrid({
    	data:[
    	      {'id':'1','invdate':'2014-01-22','name':'wang','amount':'100','tax':'1','total':'1','closed':'Yes','ship_via':'','note':'note'}
    	     ],
    	datatype:'local',
    	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Closed','Ship via','Notes'], 
    	colModel:[ 
    	           {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10}}, 
    	           {name:'invdate',index:'invdate', width:80,editable:true,editoptions:{size:10}}, 
    	           {name:'name',index:'name', width:90,editable:true,editoptions:{size:25}}, 
    	           {name:'amount',index:'amount', width:60, align:"right",editable:true,editoptions:{size:10}}, 
    	           {name:'tax',index:'tax', width:60, align:"right",editable:true,editoptions:{size:10}}, 
    	           {name:'total',index:'total', width:60,align:"right",editable:true,editoptions:{size:10}}, 
    	           {name:'closed',index:'closed',width:55,align:'center',editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}}, 
    	           {name:'ship_via',index:'ship_via',width:70, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;TN:TNT"}}, 
    	           {name:'note',index:'note', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}} 
    	         ], 
    	rowNum:10, 
    	rowList:[10,20,30], 
    	pager: '#pagered', 
    	sortname: 'id', 
    	viewrecords: true, 
    	sortorder: "desc", 
    	caption:"Editing Example", 
    	editurl:"someurl.php" 
    }); 
    
    $("#editBtn").click(function(){ 
    	var gr = jQuery("#editgrid").jqGrid('getGridParam','selrow'); 
    	if( gr != null ) 
    		jQuery("#editgrid").jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false}); else alert("Please Select Row"); 
    });
    
    $("#addBtn").click(function(){ jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false}); });
});
    </script>
   </head> 
 <body>
 <table id="editgrid"></table> 
 <div id="pagered"></div> 
 <input type="button" id="editBtn" value="Edit Selected" />
 <input type="button" id="addBtn" value="Add" />
 </body>   

</html>